<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>

        html {
            height: 100vh;
            overflow-y: scroll;
            padding: 0;
            margin: 0;
        }

        body {
            padding: 0;
            margin: 0;
            position: relative;
            min-height: 17.786667rem;
            background: url(css/image/register-top-new.png) no-repeat;
            background-size: 100%,100%;
            height: 100%;
            min-height: 670px;
            display: block;
            background-color: #0095FF;
        }
        .background {
            background-size: 100%,100%;
            padding: 0;
            margin: 0;
            position: absolute;
            top: 55%;
            left: 0;
            width: 100%;
            height: 45%;
            background: -webkit-gradient(linear, 31% 10%, 9% 95%, from(#0095FF), to(#7233C5));
        }

        .background-content {
            position: relative;
            width: 82%;
            z-index: 99;
            top: 29%;
            left: 9%;
        }
        .background-content img {
            width: 100%;
        }

        .invite-register-content {
            width: 7.5rem;
            z-index: 99;
            position: relative;
            top: 40%;
            left: 50%;
            transform: translate(-50%,0);
            /*border-radius: 50px;*/
            width: 75%;
        }
        .register-bottom{
            width: 100%;
            height: auto;
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 100;
        }

        .tel-input {
            width: 100%;
            position: relative;
            display: inline-block;
            margin: 0;
            padding: 0;
            height: 3rem;
        }
        .code-input {
            width: 100%;
            /*margin: 0.266667rem 0;*/
            margin: 1rem 0;
            height: 3rem;
            position: relative;
            padding: 0;
        }
        .submit-div {
            position: relative;
            height: 3rem;
            /*height: 1.173334rem;*/
        }

        .invite-register-content input {
            width: 100%;
            height: 3rem;
            margin-bottom: 0.266667rem;
            line-height: 1.5rem;
            text-indent: 1.5em;
            font-size: .85rem;
            border: 1px solid #ffe6bd;
            border-radius: 4px;
            box-sizing: border-box;
            outline:none;
            padding: 2px 0 0 20px;
        }
        .invite-register-content input.code{
            width: 65%;
        }
        .invite-register-content .get-code {
            font-size: 14px;
            color: #333;
            position: absolute;
            top: 0;
            right: 24px;
            height: 50px;
            line-height: 48px;
            font-weight: bold;
        }

        .invite-register-content .register {
            color: #fff;
            background: #FD5D7B;
            font-size: 0.92rem;
            font-weight: bold;
            height: 2.6rem;
            border-radius: 25px;
            text-align: center;
            box-sizing: border-box;
            line-height: 2.6rem;
            box-shadow: 0 0.4rem 0.1rem #D53150;
        }

        .invite-register-content .phone-icon,
        .invite-register-content .code-icon{
            position: absolute;
            height: 24px;
            top: 12px;
            left: 12px;
        }

        .get-code-button{
            width: 28%;
            height: 2.6rem;
            display: inline-block;
            position: absolute;
            border-radius: 4px;
            right: 0;
            box-shadow: 0 0.4rem 0.1rem #C1A705;
            background: #FFE120;
            text-align: center;
        }

        .tip,
        .result-tip{
            position: absolute;
            font-size: 0.66rem;
            color: #ff0000;
            left: 8%;
            top: -11%;
        }

        /*.bottom-top {
            position: relative;
            width: 100%;
            height: 200px;
            text-align: center;
            color: #fff;
            background-color: #27ae60;
        }
        .bottom-top:after {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            content: ' ';
            height: 200px;
            width: 100%;
            border-radius: 0 0 50% 50%;
            background-color: #27ae60;
        }*/

        .hide {
            display: none;
        }

        .tip-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            z-index: 1000;
            background-color:rgba(0,0,0,0.2)
        }
        .tip-content {
            text-align: center;
            top: 24%;
            position: absolute;
            height: auto;
            width: 68%;
            border: 1px solid #999;
            left: 16%;
            background: #fff;
            border-radius: 4px;
        }
        .tip-container .head {
            height: 30px;
            width: 100%;
            border-bottom: 1px solid #ccc;
            line-height: 30px;
            text-align: center;
        }
        .tip-container .content span{
            word-break: normal;
            width: auto;
            display: block;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
            text-align: left;
            padding: 10px;
            line-height: 26px;
            font-size: 15px;
        }
        .tip-container .bottom {
            height: 30px;
            width: 100%;
            /*border-top: 1px solid #ccc;*/
            line-height: 30px;
            text-align: right;
        }
        .tip-container .bottom span{
            margin-right: 13px;
            color: #27ae60;
        }
    </style>
</head>
<body>
<div class="background">

</div>
<div class="background-content">
    <img src="css/image/background-img-new.png">
</div>

<div class="invite-register-content">

    <div class="tip hide">
        <span class="tip-content">请先输入手机号</span>
    </div>

    <div class="result-tip hide">
        <span class="result-tip-content">注册成功</span>
    </div>

    <div class="tel-input input-group">
        <img src="css/image/phone-icon.png" class="phone-icon">
        <input value="" type="tel" class="mobile" placeholder="请输入手机号" />
    </div>

    <div class="code-input input-group">
        <img src="css/image/code-icon.png" class="code-icon">
        <input value="" class="code" type="number" minlength="6" maxlength="6" placeholder="请输入验证码" />
        <div class="get-code-button"><span class="get-code">获取</span></div>
    </div>
    <div class="submit-div input-group">
        <div class="register">
            <span>立即领取</span>
        </div>
    </div>

</div>

<div class="tip-container hide">
    <div class="tip-content">
        <div class="head">提示</div>
        <div class="content">
            <span class="content-span">提交错误，请修改</span>
        </div>
        <div class="bottom">
            <span class="shutdown-tip">确定</span>
        </div>
    </div>
</div>
<!--<img src="css/image/register-bottom.png" class="register-bottom">-->


<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript">
    $(function () {

        //发送验证码按钮是否禁用
        var btnDisable = false;

        var getUrlParameter = function getUrlParameter(sParam) {
            var sPageURL = decodeURIComponent(window.location.search.substring(1)),
                sURLVariables = sPageURL.split('&'),
                sParameterName,
                i;

            for (i = 0; i < sURLVariables.length; i++) {
                sParameterName = sURLVariables[i].split('=');

                if (sParameterName[0] === sParam) {
                    return sParameterName[1] === undefined ? true : sParameterName[1];
                }
            }
        };

/*        $('.invite-register-content .mobile').bind('input propertychange', function() {
            //var mobile = $(".mobile").val();
            $(".tip").addClass("hide");
        });
        $('.invite-register-content .code').bind('input propertychange', function() {
            $(".tip").addClass("hide");
        });*/

        /**
         * 获取验证码
         */
        $(".invite-register-content").on("click", ".get-code", function (e) {
            //处于禁用时间 //字体变化颜色
            if(btnDisable){
                return;
            }
            var mobile = $(".mobile").val();
            if(mobile == "" ) {  // || !mobileAvailable(mobile) 校验是否正确的手机号
                showTip("请先输入手机号");
                return ;
            }
            if(!mobileAvailable(mobile)) {
                showTip("请输入正确的手机号码");
                /*$(".tip-content").html("请输入正确的手机号码");
                $(".tip").removeClass("hide");*/
                return ;
            }

            var params = {
                type: "00",
                mobile: mobile
            };

            $.getJsonData("/api/user/sendVerifyCode", params).done(function (result) {
                if(result.code=="200"){
                    showTip("发送成功");
                    /*$(".tip-content").html("发送成功");
                    $(".tip").removeClass("hide");*/

                    timeWait(60);
                    btnDisable = true;
                }else{
                    showTip(result.message);
                    /*$(".tip-content").html(result.message);
                    $(".tip").removeClass("hide");*/
                }

            }).fail(function (e) {
                showTip("发送失败");
                /*$(".tip-content").html("发送失败");
                $(".tip").removeClass("hide");*/
                // timeWait(60);
                // btnDisable = true;
            });
            // timeWait(60);
            // btnDisable = true;

        });

        /**
         * 提交注册 (分享注册)
         */
        $(".invite-register-content").on("click", ".register", function (e) {
            var mobile = $(".mobile").val();
            if(mobile == "" ) {  // || !mobileAvailable(mobile) 校验是否正确的手机号
                showTip("请先输入手机号");
                /*$(".tip-content").html("请先输入手机号");
                $(".tip").removeClass("hide");*/
                return ;
            }
            if(!mobileAvailable(mobile)) {
                showTip("请输入正确的手机号码");
                /*$(".tip-content").html("请输入正确的手机号码");
                $(".tip").removeClass("hide");*/
                return ;
            }
            var code = $(".code").val();
            if(code == "" ) {
                showTip("请输入验证码");
                /*$(".tip-content").html("请输入验证码");
                $(".tip").removeClass("hide");*/
                return ;
            }
            if(!codeAvailable(code) ) {
                showTip("请输入6位有效数字验证码");
                /*$(".tip-content").html("请输入6位有效数字验证码");
                $(".tip").removeClass("hide");*/
                return ;
            }

            var uid = getUrlParameter("uid");
            /*var params = {
                mobile: mobile,
                code: code,
                uid: uid== undefined ? 452115172400562176 : uid
            };*/
            var userId = uid == undefined ? "457322128656" : uid;
            var params = "&mobile=" + mobile + "&code=" + code + "&uid=" + userId + "&";

            $.getJsonData("/api/user/inviteRegister", params
                , {type:"Post", contentType:"application/x-www-form-urlencoded"}).done(function (result) {
                if(result.code =="200") {
                    window.location.href="app-download.html";
                } else {
                    showTip(result.message);
                    return ;
                }
            }).fail(function (data) {
                showTip("注册失败");
            });

        });

        /**
         * 检查是否为正常手机号
         */
        function mobileAvailable(str) {
            var reg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            return reg.test(str);
        }

        /**
         * 检验验证码是否正常（6位数字）
         */
        function codeAvailable(str) {
            var reg = /^\d{6}$/;
            return reg.test(str);
        }

        /**
         * 倒计时和倒计时显示
         */
        function timeWait(seconds) {
            setTimeout(function () {
                if(seconds>=0) {
                    $(".get-code").html(seconds + "s");
                    seconds -- ;
                    timeWait(seconds);
                }else {
                    $(".get-code").html("获取");
                    btnDisable = false;
                }
            }, 1000);
        }

        // 展示提示框
        function showTip(content) {
            $(".tip-container").removeClass("hide");
            $(".tip-container .content-span").html(content);
        }

        $(".tip-container").on("click", ".shutdown-tip", function (e) {
            $(".tip-container").addClass("hide");
        });
    });
</script>
</body>
</html>